<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>



<div style="height: 100vh;background-color: #666">
	<!-- 文档地址 https://getbootstrap.net/docs/components/breadcrumb/ -->
	<nav aria-label="breadcrumb">
		<ol class="breadcrumb">
			<li class="breadcrumb-item">Home</li>
			<li class="breadcrumb-item active">Library</li>
			<li class="breadcrumb-item " aria-current="page">Data</li>
		</ol>
	</nav>
</div>

<script type="text/javascript">
	//获取面包屑的项
	var crumbitem=$('.breadcrumb .breadcrumb-item');
	crumbitem.click(function(){
		console.log($(this).index());
		//利用addClass()、removeClass()来控制当前点击项的样式。
		//siblings()可获取当前点击项的其他兄弟元素
		$(this).addClass('active')
		$(this).siblings().removeClass('active');
	})
</script>